<!DOCTYPE html
		PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />

	<title>Unobtrusive Accessible jQuery Graphical Form Inputs</title>

	<script src="../../_jquery/jquery-1.3.2.js"></script>
	<script src="../prettify.jquery.js" type="text/javascript"></script>

	<link rel="stylesheet" type="text/css" href="prettify.example.css" media="all" />
	<script src="prettify.example.js" type="text/javascript"></script>
</head>
<body>

<h1>Prettify</h1>

<h2>Input Elements</h2>

<h3>Submit</h3>

<p>
	<input type="submit" value="Search" />
</p>

<p>
	<input type="submit" value="Search Moar" disabled="disabled" />
</p>

<h3>Text</h3>

<p>
	<input type="text" value="" title="Your E-Mail Address" />
</p>

<p>
	<input type="text" value="me@here.com" title="Your E-Mail Address" />
</p>

<p>
	<input type="text" value="me@here.com" title="Your E-Mail Address" disabled="disabled" />
</p>

<h3>Text Area</h3>

<p>
	<textarea title="Your E-Mail Address"></textarea>
</p>

<p>
	<textarea title="Your E-Mail Address">me@here.com</textarea>
</p>

<p>
	<textarea title="Your E-Mail Address" disabled="disabled">me@here.com</textarea>
</p>

<h3>Checkbox</h3>

<p>
	<input type="checkbox" id="check1" /> <label for="check1">Checky One</label>
</p>

<p>
	<input type="checkbox" id="check2" checked="checked" /> <label for="check2">Checky Two</label>
</p>

<p>
	<input type="checkbox" id="check3" disabled="disabled" /> <label for="check3">Checky Three</label>
</p>

<p>
	<input type="checkbox" id="check4" checked="checked" disabled="disabled" /> <label for="check4">Checky Four</label>
</p>

<h3>Select (dropdown)</h3>

<p>
	<select>
		<option value="first">First Option</option>
		<option value="second">Second Option</option>
		<option value="third">Third Option</option>
	</select>
</p>

<p>
	<select>
		<option value="first">First Option</option>
		<option value="second" selected="selected">Second Option</option>
		<option value="third">Third Option</option>
	</select>
</p>

<p>
	<select disabled="disabled">
		<option value="first">First Option</option>
		<option value="second">Second Option</option>
		<option value="third">Third Option</option>
	</select>
</p>

<h3>Select (slider)</h3>

<p>
	<select class="slider">
		<option value="first">First Option</option>
		<option value="second">Second Option</option>
		<option value="third">Third Option</option>
		<option value="fourth">Fourth Option</option>
		<option value="fifth" selected="selected">Fifth Option</option>
		<option value="sixth" disabled="disabled">Sixth Option</option>
		<option value="seventh">Seventh Option</option>
	</select>
</p>

<p>
	<select>
		<option value="first">First Option</option>
		<option value="second" selected="selected">Second Option</option>
		<option value="third">Third Option</option>
	</select>
</p>

<p>
	<select disabled="disabled">
		<option value="first">First Option</option>
		<option value="second">Second Option</option>
		<option value="third">Third Option</option>
	</select>
</p>

<h3>Select (multi-button)</h3>

<p>
	<select multiple="multiple">
		<option value="first">First Option</option>
		<option value="second">Second Option</option>
		<option value="third" selected="selected" disabled="disabled">Third Option</option>
		<option value="fourth">Fourth Option</option>
		<option value="fifth" selected="selected">Fifth Option</option>
	</select>
</p>

<p>
	<select multiple="multiple" disabled="disabled">
		<option value="first">First Option</option>
		<option value="second">Second Option</option>
		<option value="third">Third Option</option>
	</select>
</p>

<h3>Radio Button</h3>

<p>
	<input type="radio" name="rad" id="rad_1" /> <label for="rad_1">Rad One</label>
</p>

<p>
	<input type="radio" name="rad" id="rad_2" disabled="disabled" /> <label for="rad_2">Rad Two</label>
</p>

<p>
	<input type="radio" name="rad" id="rad_3" checked="checked" /> <label for="rad_3">Rad Three</label>
</p>

<p>
	<input type="radio" name="rad2" id="rad_4" checked="checked" disabled="disabled" /> <label for="rad_4">Rad Four</label>
</p>

</body>
</html>